<template>
  <div class="contactUs">
    <div class="btnGrounp">
      <el-button @click="changeShow" class="showTable">{{btnText}}</el-button>
      <el-button @click="addContact" v-if="addBtn">新增</el-button>
    </div>
    <div class="content" v-if="showTable">
       <el-table :data="contentData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%" stripe :header-cell-class-name='lastTaHead'>
        <el-table-column prop="phone" label="厂家电话" width="30%"  align='center'></el-table-column>
        <el-table-column prop="email" label="厂家邮箱" width="30%"  align='center'></el-table-column>
        <el-table-column label="操作" align='center' width="100%" class-name='lastTd'>
          <template slot-scope="scope">
            <el-button class="edit" size='mini'  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>    
            <el-button  class="delete" size='mini' type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>

          </template>
        </el-table-column >
      </el-table>
    </div>
    <!-- 弹框 -->
    <div class="dialog">
      <el-dialog :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="厂家电话" label-width="4.5rem">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="厂家邮箱" label-width="4.5rem">
            <el-input v-model="form.email" autocomplete="off" @keyup.enter.native="sureEdit"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="sureEdit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="paging">
      <el-pagination :page-size="pageSize"  layout="prev, pager, next" :total="totalNum" @current-change='changeCurrentPage'></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'contactUs',
  data () {
    return {
      showTable:false,//
      // showTableContent:false,//是否显示表格
      btnText:"开启显示",
      addBtn:false,//新增按钮是否显示
      type:'',//操作类型
      //内容数据
      contentData: [],
      pageSize:7,//每页显示条目个数
      totalNum:1000,//总条目数   
      currentPage:1,
      // formTitle: '编辑',//表单标题
      dialogFormVisible:false,//对话框是否可见
      //对话框表单
      form: {
            phone:'',
            email:'',//排序
          },
      id:"",//修改行的id
      // // upLoadData:{//上传时附带的其他参数
      // //     srid:''
      // // }
    }
  },
  methods: {
    //改变显示
    changeShow(){
      let _this = this;
      if(_this.showTable == false){
        _this.showTable = true
      }else{
        _this.showTable = false
      }
      _this.openShow();//通知后端  是否显示
    },
    //开启显示
    openShow(){
      let  _this = this;
      // debugger
      let isShow = '';
      if(_this.showTable == true){
        isShow = 0;       
      }else{
        isShow = 1;       
      }
      console.log(_this.showTable,'showTable');
      // _this.$store.dispatch('isShow',_this.showTable);//缓存登录状态 

      // debugger
      let api = '/api/company/changeShow?isShow='+isShow;
      let sessionId = _this.$store.state.id;//获取token 
      _this.axios({
        url:api,
        method: 'post',
        headers:{
          sessionId,
        }		
      }).then(res=>{
        console.log('开启显示',res);
        if(res.data.code == 401){
            _this.$message({
              type: 'info',
              message: '登录已失效，请重新登录'
            });  
            _this.$router.push({
              path:"/"
            });
            return
        }
        if(res.data.code == 200){
            if(_this.showTable == true){//显示

            console.log(_this.showTable,'显示');

              _this.showTable = true;
              _this.addBtn = true;
              _this.btnText = '关闭显示';
              document.getElementsByClassName('showTable')[0].style.backgroundColor = 'rgba(229, 28, 35, 1)';
              _this.getAllContact();//刷新列表

              localStorage.setItem("isShow", true);//缓存  显示页面

            }else{//隐藏

            console.log(_this.showTable,'隐藏');

              _this.showTable = false;
              _this.addBtn = false;
              _this.btnText = '开启显示';
              document.getElementsByClassName('showTable')[0].style.backgroundColor = 'rgba(139, 195, 74, 1)';

              localStorage.setItem("isShow", false);//缓存  隐藏页面
            }
        }
      });


      
    },
    //新增联系
    addContact(){
      let _this = this;
      _this.dialogFormVisible = true;//显示对话框
      _this.form.phone = '';
      _this.form.email = '';
      _this.type = 0;
      
    },
    //编辑行
    handleEdit(index, row) {
      let _this = this;
      //console.log(index, row);
      _this.dialogFormVisible = true;//显示对话框
      _this.form.phone = _this.contentData[index].phone;
      _this.form.email = _this.contentData[index].email;
      _this.id = row.id;
      _this.type = 1;

    },
    //删除行
    handleDelete(index, row) {
      let _this = this;
      //console.log(index, row);
      _this.$confirm('是否删除?',  {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let sessionId = _this.$store.state.id;//获取token 
          let api = '/api/company/delete?id='+row.id;
          _this.axios({
            url:api,
            method: 'post',
            headers:{
              sessionId,
            }		
          }).then(res=>{
            //console.log('删除行',res)
            if(res.data.code == 401){
                _this.$message({
                  type: 'info',
                  message: '登录已失效，请重新登录'
                });  
                _this.$router.push({
                  path:"/"
                });
                return
            }
            if(res.data.code == 200){
              _this.$message({
                type: 'success',
                message: '删除成功!'
              });
              _this.form.phone = '';
              _this.form.email = '';
              _this.getAllContact();//刷新
            }
          });
        }).catch(() => {
          _this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //确认操作
    sureEdit(){ 
      let _this = this;
      if(!(/^1[3456789]\d{9}$/.test(_this.form.phone))){
        _this.$message('请填入正确的手机号');
        return
      }
      if(!(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(_this.form.email))){
        _this.$message('请填入正确的邮箱');
        return
      }
      //console.log('操作类型',_this.type);
      let api = '';
      let data = '';
      let sessionId = _this.$store.state.id;//获取token
      if(_this.type == 0){//新增
        api = '/api/company/insert';
        data = {
            "email": _this.form.email,
            "phone": _this.form.phone
        }
      }else{//编辑
        api = '/api/company/update';
        data = {
            "email": _this.form.email,
            "id": _this.id,
            "phone": _this.form.phone,
        }
      }
       _this.axios.post(api,data,{
          headers:{
            sessionId,
          }
        }).then(res=>{
          //console.log('联系方式',res);
          if(res.data.code == 401){
              _this.$message({
                type: 'info',
                message: '登录已失效，请重新登录'
              });  
              _this.$router.push({
                path:"/"
              });
              return
            }
          if(res.data.code == 403){
            _this.$message({
              type: 'info',
              message: res.data.status
            });  
            return
          }
          if(res.data.code == 500){
            _this.$message(res.data.data.errMsg);
            _this.form.email = '';
            _this.form.phone = '';

            _this.dialogFormVisible = false;
            return
          }
          if(res.data.code == 200){
            _this.$message({
                type: 'success',
                message: (_this.type==0?'新增':'编辑')+'成功'
              }); 
              _this.form.email = '';
              _this.form.phone = '';

            _this.dialogFormVisible = false;
            _this.getAllContact();//刷新
          }
        });
    },
    //确认修改
    // EditCompany(){
    //   let _this = this;
      
    // },
    //改变当前页
    changeCurrentPage(val){
      //console.log(`当前页: ${val}`);
      let _this = this;
      _this.currentPage = val;
      _this.getAllContact();//调用同一接口
    },
    //最后一列的表头
    lastTaHead({row, column, rowIndex, columnIndex}){
      let _this = this;
      if(columnIndex == 2){
        return 'lastTd lastTdHead'
      }
    },
    // //图片上传成功实现本地预览
    // handleAvatarSuccess(res, file) {
    //     let _this = this;
    //     _this.form.imageUrl = URL.createObjectURL(file.raw);
    //   },
    // //上传之前的钩子函数
    // beforeAvatarUpload(file) {
    //   let fd = new FormData();
    //   fd.append('file',file);//传文件
    //   // fd.append('srid',this.upLoadData.srid);//传其他参数
    //   axios.post('/api/up/file',fd).then(function(res){
    //           //console.log('成功');
    //   })
    //   return false//屏蔽了action的默认上传
    // }
    //获取所有
    getAllContact(){
      let _this = this;
      let api = '/api/company/find_page';
      let sessionId = _this.$store.state.id;//获取token
      _this.axios.post(api,{
            "pageIndex": _this.currentPage,
             "pageSize": 7
      },{
        headers:{
          sessionId,
        }	
      }).then(res=>{
        //console.log('所有联系方式',res)
        if(res.data.code == 401){
            _this.$message({
              type: 'info',
              message: '登录已失效，请重新登录'
            });  
            _this.$router.push({
              path:"/"
            });
            return
          }
          if(res.data.code == 403){
            _this.$message({
              type: 'info',
              message: res.data.status
            });  
            return
          }
        if(res.data.code == 200){
          _this.totalNum = res.data.data.count;//获取总条数
          _this.contentData = res.data.data.bussData;
          // _this.contentData.forEach(item=>{
          //   item.showAdjust = true;
          //   item.gmtCreated = new Date(item.gmtCreated).format("yyyy-MM-dd hh:mm:ss");
          // });
        }
      });
    },
  },
  mounted(){
    let _this = this;

    //获取联系我们  页面是否显示
    _this.showTable = localStorage.getItem("isShow");
    console.log(localStorage.getItem("isShow"));

    if(_this.showTable == null){
      _this.showTable = false;
    }
    if(_this.showTable == 'true'){
      _this.showTable = true
    }
    if(_this.showTable == 'false'){
      _this.showTable = false
    }

    _this.openShow();//通知后端  是否显示页面

    _this.getAllContact();


  }
}
</script>

<style scoped>
/* 整体样式 */
.contactUs{
  height: 100%;
  width: 100%;
  position: relative;
  padding-left: 2%;
  font-size: .875rem;
}
.contactUs>>>.btnGrounp .el-button{
  background-color: rgba(139, 195, 74, 1);
  color: rgb(255, 255, 255,1);
}

/* 主要内容 */
.contactUs>>>.content{
  width: 85%;
  position: absolute;
  top: 15%;
  color: rgba(16, 16, 16, 1) !important;
}
/* table无数据时的显示 */
.contactUs>>>.el-table__empty-block{
   width: 100% !important;
}
.contactUs>>>.content img{
  width: 21%;
}
.contactUs>>>.content table{
  width: 100% !important;
}
/* 最后一列 */
.contactUs>>>.lastTd{
  text-align: left;
  padding-left: 2%;
}
/* 消除表头变形 */
.contactUs>>>table .gutter{
  display: block !important;
}
.contactUs>>>.lastTd .cell{
   height: 1.75rem;
  line-height: 1.75rem;

}
/* .contactUs>>>.lastTd .cell{
  height: 20%;
  line-height: 20%;
} */
/* 最后一列表头 */
  .contactUs>>>.lastTdHead{
    padding-left: 3%;
  }
/* 表格内的按钮 */
.contactUs>>>.content table .defaultBtn{
  color: rgba(16, 16, 16, 1);
}
/* 编辑按钮 */
.contactUs>>>.edit{
  background-color: rgba(63, 81, 181, 1);
}
/* 删除按钮 */
.contactUs>>>.delete{
  background-color: rgba(229, 28, 35, 1);
}
/* 分页 */
.contactUs>>>.paging{
  position: absolute;
  bottom: 0%;
  text-align: center;
  width: 85%;
}
/* 对话框 */
.contactUs>>>.el-dialog{
  width: 30%;
}
/* 对话框的输入框 */
.contactUs>>>.el-dialog .el-input{
  width: 80%;
}
/* 对话框足部 */
.contactUs>>>.el-dialog__footer{
  text-align: center;
}
/* .contactUs>>>.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .contactUs>>>.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .contactUs>>>.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .contactUs>>>.avatar {
    width: 178px;
    height: 178px;
    display: block;
  } */
</style>
